<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .div-card {
            border: 1px gray solid;
            border-radius: 10px;
            padding: 15px;
        }

        .div-card-title {
            font-size: 15px;
            font-weight: bold;
            margin-bottom: 10px;
        }

        .div-card-son {
            width: 100px;
            height: 100px;
            color: darkgray;
            font-size: 12px;
            border: 1px solid darkgray;
            background: pink;
        }

        .div-card-son:hover {
            font-size: 0px;
            width: 20px;
            height: 20px;
            border: 5px solid darkgray;
            background: skyblue;
        }

        .div-card-son1 {
            transition-property: none;
        }

        .div-card-son2 {
            transition-property: border, background;
            transition-duration: 1s;
            transition-timing-function: ease-out;
        }

        .div-card-son3 {
            transition: all 2s ease 2s;
        }
    </style>
  </head>
  <body>
    <!--transition属性设置过渡属性、过渡时间、过渡函数和过渡延迟时间，该属性是transition-property、transition-duration、transition-timing-function和transition-delay的结合体-->
    <div class="div-card">
      <div class="div-card-title">
        `transition-property`属性指定哪些CSS属性用于过度，只有被指定的属性才可发生动画
      </div>
      <div class="div-card-body" style="display: flex;column-gap: 100px">
        <div class="div-card-son div-card-son1">无动画</div>
        <div class="div-card-son div-card-son2">有动画</div>
        <div class="div-card-son div-card-son3">有动画</div>
      </div>
    </div>
    <br><br><br>
  </body>
</html>